<script setup>
import ElCardBg from '@/components/ElCardBg.vue'
import { ref, onMounted } from 'vue'
import { linkPageList, delLink, auditLink } from '@/api/link.js'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
import { useRoute } from 'vue-router';

// 状态值
const options = [
  {
    type: 'success',
    status: '审核成功',
    id: 1
  }, {
    type: 'danger',
    status: '审核失败',
    id: 2
  },
  {
    type: 'warning',
    status: '待审核',
    id: 3
  }
]
// 选择框的值
const params = ref({
  name: '',
  status: ''
})
// 分页参数
const pageParams = ref({
  page: 1,
  limit: 7
})
// 总记录数
const total = ref(0)
// 友链列表
const linkList = ref([])
// 获取分页列表
const getPageLinkList = async (data) => {
  let res = null
  if (data) {
    console.log('待参数');
    res = await linkPageList(pageParams.value, data)
  } else {
    res = await linkPageList(pageParams.value)
  }
  linkList.value = res.data.records
  total.value = res.data.total
}
// 页面变化了
const handleCurrentChange = () => {
  getPageLinkList()
}
// 模糊匹配搜索
const search = () => {
  if (params.value.name === '') {
    return
  }
  if (params.value.status === '') {
    getPageLinkList({
      name: params.value.name
    })
    return
  }
  const item = options.find(item => item.status === params.value.status)
  // 参数解耦出来
  getPageLinkList({
    name: params.value.name,
    status: item.id
  })
}
// 清空下拉框的回调函数
const clearable = () => {
  params.value.status = ''
  // 重新刷新
  getPageLinkList()
}
// 状态值变化了
const statusChange = () => {
  console.log('第三方');
  if (params.value.status === undefined) {
    return
  }
  // 遍历这个集合获取到这个对象
  const item = options.find(item => item.status === params.value.status)
  // 解耦参数
  getPageLinkList({
    name: params.value.name,
    status: item.id
  })
}
// 重置
const reset = () => {
  params.value.status = ''
  params.value.name = ''
  getPageLinkList()
}
// 组件挂载之前执行
onMounted(() => {
  getPageLinkList()
})

// 删除友链
const delBtnLink = (id) => {
  ElMessageBox.confirm(
    '您确定要删除该友链吗?',
    '删除友链',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      await delLink(id)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      getPageLinkList()
    })
}
// 审核弹层
const isAuditDialog = ref(false)
// 审核信息
const auditMessage = ref('')
// 存储审核信息
const auditFail = {
  linkAddress: '',
  message: ''
}
// 审核
const audit = async (id, row) => {
  if (id === 1) {
    // 调用审核成功接口
    await auditLink(id, {
      linkAddress: row.linkAddress,
      message: row.name + '连接成功'
    })
    ElNotification({
      title: '审核成功',
      message: ({ style: 'color: #249bdb' }, row.name + '连接成功可以去网站上查看啦'),
    })
    reset()
  } else {
    console.log(row.linkAddress);
    auditFail.linkAddress = row.linkAddress
    // 弹层打开
    isAuditDialog.value = true
  }
}
// 关闭弹层
const onClose = () => {
  // 清空表单
  auditMessage.value = ''
  isAuditDialog.value = false
}
// 点击了审核失败按钮
const onOk = async () => {
  // 失败消息
  auditFail.message = auditMessage.value
  await auditLink(2, auditFail)
  ElNotification({
    title: "审核失败",
    message: ({ style: 'color: #249bdb' }, auditMessage.value)
  })
  reset()
  isAuditDialog.value = false
}
// 获取到路由信息
const router = useRoute()
onMounted(() => {
  if (router.query.name) {
    params.value.name = router.query.name
    params.value.status = '待审核'
    search()
  }
})
</script>
<template>
  <ElCardBg title="友链管理">
    <template v-slot:content>
      <el-row>
        <el-col :span="6" style="margin-right: 10px;">
          <el-form-item label="友链名称：" prop="">
            <el-input placeholder="请输入友链名称" v-model="params.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" style="width: 80px;" @click="search">
            <i class="iconfont icon-sousuo1" style="margin-right: 6px;font-size: 18px;"></i>
            <span style="margin-right: 30px;">搜索</span>
          </el-button>
          <el-button type="info" style="width: 80px;" @click="reset">
            <i class="iconfont icon-zhongzhi" style="margin-right: 8px;font-size: 14px;"></i>
            <span style="margin-right: 30px;">重置</span>
          </el-button>
        </el-col>
        <el-col :span="5">
          <el-form-item label="友链状态：" prop="">
            <el-select @change="statusChange" @click="clearable" clearable v-model="params.status" placeholder="审核状态"
              style="width: 300px;">
              <el-option v-for="item in options" :key="item" :value="item.status"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 状态下拉 -->
      <el-row style="margin-top: 8px;">
        <!-- 列表 -->
        <el-table :data="linkList" height="458px" :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }">
          <el-table-column label="序号" prop="id" width="52"></el-table-column>
          <el-table-column label="名称" prop="name" width="190"></el-table-column>
          <el-table-column label="头像" prop="linkUrl" width="100">
            <template #default="scope">
              <div class="img-box">
                <img :src="scope.row.linkUrl" alt="">
              </div>
            </template>
          </el-table-column>
          <el-table-column label="网址" prop="linkAddress" width="386">
            <template #default="scope">
              <el-link type="primary" target="_blank" :href="scope.row.linkAddress">{{ scope.row.linkAddress
                }}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="描述" prop="description" width="180"></el-table-column>
          <el-table-column label="标识" prop="identification" width="120"></el-table-column>
          <el-table-column label="状态" prop="status" width="140">
            <template #default="scope">
              <!-- 审核失败 -->
              <el-tag :type="(options.find(item => item.id === scope.row.status)).type">{{
          (options.find(item => item.id === scope.row.status)).status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="180"></el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template #default="scope">
              <div class="btn-div">
                <!-- <el-button link type="warning">审核</el-button> -->
                <el-dropdown v-permissionDirective>
                  <el-button link type="warning">审核</el-button>
                  <template #dropdown v-if="scope.row.status === 3">
                    <el-dropdown-menu>
                      <el-dropdown-item @click="audit(1, scope.row)">审核成功</el-dropdown-item>
                      <el-dropdown-item @click="audit(2, scope.row)">审核失败</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <el-button link type="danger" @click="delBtnLink(scope.row.id)" style="margin-left: 10px;"
                  v-permissionDirective>删除</el-button>
              </div>
            </template>
          </el-table-column>
          <template v-slot:empty>
            <el-empty description="暂无数据"></el-empty>
          </template>
        </el-table>
      </el-row>
      <el-pagination class="pagination" hide-on-single-page :default-page-size="7" background :total="total"
        layout="total, prev, pager, next, jumper" v-model:current-page="pageParams.page"
        @current-change="handleCurrentChange"></el-pagination>
    </template>
  </ElCardBg>
  <el-dialog title="失败原因" width="400px" v-model="isAuditDialog" @close="onClose">
    <el-input v-model="auditMessage"></el-input>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="onClose">取 消</el-button>
        <el-button size="small" type="primary" @click="onOk" :loading="confirmLoading">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.img-box {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-left: 18px;

  img {
    border-radius: 4px;
    width: 40px;
    height: 40px;
    object-fit: cover;
  }
}

.btn-div {
  display: flex;
}

.pagination {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-right: 10px;
}
</style>